<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="height:3000px">
  <div id="app">
    <button @click="changeState">{{isShow?'隐藏':'显示'}}</button>
    <home v-if="isShow"></home>
  </div>
  <template id="tpl">
    <div>
      <h1>我是home页</h1>
      <button @click="add">改变</button> 
      <ul id="oul">
        <li v-for="item in arr" :key="item">
          {{item}}
        </li>
      </ul>
    </div>
  </template>
  <script src="./vue.js"></script>
  <script>
   
    const Home = {
      template:"#tpl",
      data(){
        return {
         arr:[1,2,3,4],
         timer: null
        }
      },
      methods:{
        add () {
          this.arr.push(this.arr.length+1)
        }
      },
      beforeCreate(){
        console.log('实例刚刚创建、此时不能直接修改数据')
      },
      created(){
        console.log("实例已经创建完成、此时已经可以操作数据了")
        console.log(document.querySelector("#oul"),'created')
      },
      beforeMount(){
        console.log('模板渲染之前，此时还不能获取dom')
        console.log(document.querySelector("#oul"),'beforeMount')
      },
      mounted(){
        console.log('模板已经渲染完成，可以获取dom了')
        console.log(document.querySelector("#oul"),'mounted')
        this.timer = setInterval(()=>{
          console.log('定时器')
        },1000)
        window.onscroll = ()=>{
          let sTop = document.documentElement.scrollTop||document.body.scrollTop;
          console.log("页面滚动了",sTop)
        }
      },
      beforeUpdate(){
        console.log('数据更新，视图更新之前')
        console.log(document.querySelector("#oul").children)
      },
      updated(){
        console.log('数据更新，视图重新渲染')
        console.log(document.querySelector("#oul").children)
      },
      beforeDestroy(){
        console.log('组件卸载之前');
        // 清楚当前组件的定时器 以及 注销 全局 事件绑定（如滚动、resize)
        window.onscroll = null;
        clearInterval(this.timer)
      },
      destroyed(){
        console.log("组件已经卸载")
      }
      
    }
    
    Vue.component('Home',Home)
    const vm = new Vue({
      el:"#app",
      data:{
        isShow:true
      },
      methods:{
        changeState(){
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</html>
